<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import { loginWechat, wxMiniGetPhoneNumber } from '@/api/login';
import { useAppStore, useUserStore } from '@/store/modules';
import { setToken } from '@/utils/auth';
import config from '@/config/config';

import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';


const userStore = useUserStore();
const appStore = useAppStore();
const siteInfo = computed(() => appStore.siteInfo)

// 页面参数
const queryParams = ref({})

// 是否选中
const checked = ref(false)


// 发起微信登录
function wxLoginFn() {
  if (!checked.value) return Toast.fail('请认真阅读并同意用户协议')

  uni.login({
    "provider": "weixin",
    "onlyAuthorize": true, // 微信登录仅请求授权认证
    success: async (event) => {
      const { code } = event
      const data = {
        code,
        inviteCode: queryParams.value.inviteCode || uni.getStorageSync('inviteCode'),
      }
      const res = await loginWechat(data)
      setToken(res.data.token)
      await userStore.getUserInfo()
      Toast.success({
        message: '登录成功',
        onClose() {
          userStore.userInfo = Object.assign(userStore.userInfo, {
            openId: res.data.openid,
            unionId: res.data.unionid
          })

          uni.switchTab({ url: config.page.index })
        }
      })
    }
  })

}


/**
 * 判断当前设备是否为宽屏设备。
 * 
 * 该函数通过获取设备的屏幕宽度和高度，计算宽高比，
 * 并根据设定的阈值（宽度大于等于768像素或宽高比大于1.6）判断设备是否为宽屏。
 * 
 * 返回值：
 *   - true：设备为宽屏设备
 *   - false：设备为非宽屏设备
 */
function isWideScreenDevice() {
  const { screenWidth, screenHeight } = uni.getSystemInfoSync();
  const aspectRatio = screenWidth / screenHeight;
  return screenWidth >= 768 || aspectRatio > 1.6; // 宽屏阈值
}


const toPage = (page) => {
  uni.navigateTo({ url: `/pages/${page}/index` })
}

// 前往登录页
const toLogin = () => {
  uni.redirectTo({ url: '/pages/login/index' })
}


onLoad((e) => {
  if (e.inviteCode) {
    queryParams.value.inviteCode = e.inviteCode
  }
})
</script>

<template>
  <div class='wxlogin'>
    <NavBar></NavBar>
    <div class="container">
      <div class="o_title">欢迎使用{{ siteInfo?.siteName }}</div>
      <div class="o_label">立即登录，享受优质服务</div>
      <open-data class="user_avatar" type="userAvatarUrl" default-avatar="@/assets/imgs/wxloginicon.png"></open-data>
      <div class="wxlogin_btn" @click="wxLoginFn">
        <i class="iconfont ai-icon-weixin"></i>
        微信用户一键登录
      </div>

      <div class="user_agreement">
        <div class="user_agreementFlex">
          <van-checkbox :value="checked" @change="checked = !checked" icon-size="28rpx" checked-color="#57BE6A"
            @click="!checked">
            我已阅读并同意
          </van-checkbox>
        </div>
        <div class="protocol_name" @click="toPage('protocol/serviceterms')">《服务协议》</div>、
        <div class="protocol_name" @click="toPage('protocol/privacy')">《隐私条款》</div>
      </div>
      <div class="footer" :class="{ mTop: isWideScreenDevice() }">
        <div class="order">
          <span class="line"></span>
          <span class="txt">手机号登录</span>
          <span class="line"></span>
        </div>
        <img src="../../assets/imgs/phone.png" alt="" @click="toLogin">
      </div>
    </div>
  </div>
  <van-toast id="van-toast" />
</template>

<style lang='scss' scoped>
::v-deep {
  .van-nav-bar {
    background-color: transparent !important;
  }

  .van-checkbox__label {
    color: var(--a-two-text-color) !important;
  }

}

.wxlogin {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .container {
    flex: 1;
    padding: 0 40rpx;

    .o_title {
      font-size: 44rpx;
      font-weight: bold;
      letter-spacing: 3px;
      margin-top: 120rpx;
      color: var(--a-one-text-color);
    }

    .o_label {
      color: var(--a-two-text-color);
      margin-top: 10rpx;
      font-size: 32rpx;
    }

    .user_avatar {
      display: block;
      width: 180rpx;
      height: 180rpx;
      margin: 157rpx auto 0;
      border-radius: 50%;
      overflow: hidden
    }

    .wxlogin_btn {
      height: 100rpx;
      border-radius: 50rpx;
      color: var(--a-one-text-color);
      background-color: var(--a-main-color);

      margin-top: 157rpx;

      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
    }

    .user_agreement {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #646464;
      font-size: 26rpx;
      text-align: center;
      margin-top: 20rpx;

      .user_agreementFlex {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .protocol_name {
        color: var(--a-main-color);
      }
    }

    .footer {
      font-size: 24rpx;
      color: #787E7E;
      position: absolute;
      bottom: 25rpx;
      left: 0;
      right: 0;
      text-align: center;

      &.mTop {
        position: relative;
        margin-top: 100rpx;
      }

      image {
        width: 84rpx;
        height: 84rpx;
        // background-color: #ebe9e9;
        border-radius: 50%;
        margin-bottom: 50rpx;
        border: 2px solid #ebe9e9;
        padding: 5rpx;
      }

      .order {
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        margin-bottom: 20rpx;

        .line {
          height: 1rpx;
          display: inline-block;
          width: 200rpx;
          background-color: #E0E0E0;
        }

        .txt {
          display: inline-block;
          color: #686868;
          vertical-align: middle;
          width: 180rpx;
        }
      }
    }
  }
}
</style>